<template>
    <div class="top-box">
        <titleComponent title="OKR工作任务调度" :orgId="orgId" :yearFilter="yearFilter" path="/#/tokenLogin"></titleComponent>
        <div class="center">
            <div class="center-box">
                <div class="name">
                    <span>我的目标 </span>
                    <!-- <b>{{ numObj.myGoals || 0 }}</b> -->
                </div>
                <div class="value pointer">
                    <div class="num-box-value"><span>派发数</span><b style="color: #0b82ff;">{{ numObj.distributeCount || 0
                            }}</b></div>
                    <div class="num-box-value"><span>接收数</span><b style="color: #c37301;">{{ numObj.executorCount || 0
                            }}</b></div>
                    <div class="num-box-value"><span>已完成</span><b style="color: #07b981;">{{ numObj.completeCount || 0
                            }}</b></div>
                </div>
            </div>
            <div class="center-box">
                <div class="name">
                    <span>我的关键结果 </span>
                    <!-- <b>{{ numObj.myKeyResults || 0 }}</b> -->
                </div>
                <div class="value pointer">
                    <div class="num-box-value"><span>进行中</span><b style="color: #0b82ff;">{{ numObj.inProgressCount || 0
                            }}</b></div>
                    <div class="num-box-value"><span>已完成</span><b style="color: #07b981;">{{ numObj.completeKeyResults
                            || 0 }}</b></div>
                    <div class="num-box-value"><span>本月关键结果</span><b style="color: #c37301;">{{ numObj.monthKeyResults
                            || 0 }}</b></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import titleComponent from "./titleComponent";
import { searchOkrNum } from '@/api/api'
import store from '@/store'
export default {
    components: {
        titleComponent,
    },
    props: {
        income: {
            type: Object,
            default: () => { },
        },
        orgId: {
            type: String,
            default: ''
        },
        yearFilter: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            numObj: {}
        }
    },
    mounted() {
        try {
            let query = this.$route.query
            let loginCode = query.loginCode || store.getters.loginCode || ''
            searchOkrNum({ currentUser: loginCode }).then(res => {
                this.numObj = res.data || {}
            })
        } catch (error) {

        }
    },
    methods: {
        goOkr() {
            let loginCode = store.getters.loginCode
            window.open(`/#/tokenLogin?loginCode=${loginCode}&type=10`)
        },
    }
}
</script>
<style lang="scss" scoped>
.top-box {
    background: #fff;
    width: 100%;
    height: 130px;
    margin-bottom: 16px;
    box-sizing: border-box;
    padding: 16px;
}

.unit {
    color: #a5a7ac;
    font-size: 14px;
    font-weight: 400;
}

.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 14px;
}

.center-box {
    background: #e4f2fd;
    height: 66px;
    width: calc(50% - 7px);
    margin-bottom: 12px;
    position: relative;

    .name {
        text-align: center;
        width: 100%;
        height: 35px;
        line-height: 35px;
        background: #f0f7fd;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        font-size: 15px;
        font-weight: bold;

        b {
            font-size: 17px;
            margin-left: 10px;
        }
    }

    .value {
        font-size: 13px;
        text-align: center;
        width: 100%;
        color: #1e2839;
        line-height: 30px;
        display: flex;
        justify-content: space-evenly;
        cursor: default;

        .num-box-value {
            display: flex;
        }

        b {
            font-size: 16px;
            margin: 0 3px;
        }
    }

}
</style>